<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marie's Sensor Network</title>
</head>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

body{
	background:#ffc;
	margin:5px;
	font-family:Arial Black, "Trebuchet MS", sans-serif, sans-serif
}

#title{
	background:#666;
	font-size:5em;
	width:auto;
	color:#fff;
	margin-left:10px;
	margin-right:10px;
	padding-left:20px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.menu{
	float:left;
	margin-left:10px;
	width:50%;
	background-color:#ff6;	
}

#header{
	background-color:#99f;
	font-size:4em;
	font-weight:bold;
	padding:10px;
}

#query:hover{
	font-size:0.5em;
}

#query:hover header{
	background-color:#22f;
	height:25px;
	padding-top:0px;
}

#query:hover section{
	display:block;
}

#query section{
	display:none;
}

#subscription:hover{
	font-size:0.5em;
}

#subscription:hover header{
	background-color:#22f;
	height:25px;
	padding-top:0px;
}

#subscription:hover section{
	display:block;
}

#subscription section{
	display:none;
}

#configuration:hover{
	font-size:0.5em;
}

#configuration:hover header{
	background-color:#22f;
	height:25px;
	padding-top:0px;
}

#configuration:hover section{
	display:block;
}

#configuration section{
	display:none;
}

#object:hover{
	font-size:0.5em;
}

#object:hover header{
	background-color:#22f;
	height:25px;
	padding-top:0px;
}

#object:hover section{
	display:block;
}

#object section{
	display:none;
}

.selection{
	position: relative;
	z-index: 2;
	width: 15%;
	height: 29px;
	line-height: 17px;
	padding: 5px 9px;
	padding-right: 0;
	color: #2222ff;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
}

.button{
	display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: linear-gradient(top, rgba(255,255,255,1),
                                         rgba(255,255,255,0)),
                    url([...]QmCC); 
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
              0 2px 2px -1px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
  float:right;
}

.map{
	float:right;
	margin-right:5px;
	width:45%;
	display: block;
	position: relative;
	-webkit-transform-style: preserve-3d;
}

.map img{	
	width=100%;
	box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.4);
}

.map img:focus{
	-webkit-transform: scale(1.2);
	-webkit-animation-name:"show";
	-webkit-animation-duration:1s;
}



#copyright{
	width:100%;
	height:40px;
	border-radius:5px;
	background-color:#666;
	margin:2% 0;
	float:left;
}

#copyright p{
	width:90%;
	margin:10px auto;
	color: #fff;
}

@-webkit-keyframes show {
 25% {
 left: -450px;
}
 50% {
	 
 z-index: 4;
 left: -500px;
 -webkit-transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 4;
 left: -250px;
 -webkit-transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 4;
 left: 0px;
 -webkit-transform: rotate3d(0, 1, 0, 360deg);
}
}
</style>
<script type="text/javascript">
function result(){
    document.getElementById("rA").value="Parking Area 1:Empty\nParking Area 2:Occupied\nParking Area 3:Occupied\nParking Area 4:Empty\nParking Area 5:Empty\n";
}
</script>
<body>
<div id="title">
Demo APP
</div>
<div class="menu">
<div id="query">
<header id="header"> QUERY </header>
<section>
<b>Geo Location:</b><br>
Boundary N:<input type="text">  Boundary S:<input type="text"><br>
Boundary E:<input type="text">  Boundary W:<input type="text">
<input class="button" type="submit" value="Submit" /><br><br>
<b>Logic Location:</b><br>
Building:<select class="selection">
<option value=0>Parking lot</option>
<option value=1>Building 1</option>
<option value=2>Building 2</option>
<option value=3>Building 3</option>
<option value=4>Building 4</option>
</select>
Floor:<select class="selection">
<option value=0>Floor B1</option>
<option value=1>Floor 1</option>
<option value=2>Floor 2</option>
<option value=3>Floor 3</option>
<option value=4>Floor 4</option>
</select>
Room:<select class="selection">
<option value=0>Room 101</option>
<option value=1>Room 102</option>
<option value=2>Room 103</option>
<option value=3>Room 104</option>
<option value=4>Room 105</option>
<option value=5>Room 201</option>
<option value=6>Room 202</option>
<option value=7>Room 203</option>
<option value=8>Room 204</option>
<option value=9>Room 205</option>
</select>
<input class="button" type="submit" value="Submit" onClick="result()"/>
<br><br>
Observation Property:
<select class="selection">
<option value=0>Parking Sensor</option>
<option value=1>Temperature Sensor</option>
<option value=2>Noise Sensor</option>
<option value=3>Door Sensor</option>
<option value=4>Smoke Snesor</option>
</select>
<input class="button" type="submit" value="Submit" /><br>
</section>
</div>
<br>
<div id="object">
<header id="header"> OBJECT </header>
<section>
Objects:<br>
<textarea type="text" id="rA" value="result shows here" rows="5" cols="70"></textarea>
<br>
<input type="button" value="Select" onClick="this.value=Select All"/>
<input type="button" value="Delete" onClick="this.value=Delete All"/>
</section>
</div>
<br>
<div id="configuration">
<header id="header"> CONFIGURATION </header>
<section>
Type:<input type="text" readonly/>  ID:<input type="text" readonly/><br>
Module:
<select class="selection">
<option value=0>POWER</option>
<option value=1>RADIO</option>
<option value=2>SENSOR</option>
</select>
<br>
<input type="submit" value="GET"/> POST<input type="text"/> DELETE<input type="text"/> PUT<input type="text"/>
<br>
Result:<br>
<textarea type="text" id="rA" value="result shows here" rows="5" cols="70"></textarea>
</section>
</div>
<br>
<div id="subscription">
<header id="header"> SUBSCRIPTION </header>
<section>
Time:<br>
From
<input type="datetime-local" value="2014-05-25T14:00"/>
To
<input type="datetime-local" value="2014-05-25T15:00"/>
<br>
Frequency:
<input type="number" min="0" step="1" width="30px"/>Days <input type="number" min="0" step="1" width="30px"/>Hours <input type="number" min="0" step="1" width="30px"/>Minutes <input type="number" min="0" step="1" width="30px"/>Seconds 
<br>
Parameter:
Maximum:<input type="number" min="0" step="1" width="30px"/> Minimum:<input type="number" min="0" step="1" width="30px"/>
<input class="button" type="submit" value="Submit" onClick="result()"/><br>
<br>
Parameter:
Maximum:<input type="number" min="0" step="1" width="30px"/> Minimum:<input type="number" min="0" step="1" width="30px"/>
<input class="button" type="submit" value="Set As Alert"/><br>
</section>
</div>
</div>
<div class="map">
<table width="80%" border="0">
  <tr>
    <td>
    <header id="header">Senario</header><br>
    <div id="alert_win" style="display:none;">
<div id="mask" style="top:0;left:0;position: absolute;z-index:1000;" class="bg"></div>
<DIV class=beian_winBG id=beian_popup><!--popup-->
<div id="divOneStep" style="z-index:1002;width:100%;height:200px;background: #fff;position:absolute;">
<div style="width:100%;background:#f1f1f1;height:30px;light-height:30px;border-bottom:#666666 1px solid;text-align:right;"><a href="javascript:;" onClick="alert_win.style.display='none';">x</a> </div>
<div><img src="../Documents and Settings/Administrator/桌面/IMG_0027.JPG" width="100px"/></div>
</div>
<div style="z-index:1001;position:absolute;"><iframe id="frmOneStep" width="100%" height="200" frameborder="0" scrolling="no" src="about:blank"></iframe></div>
</DIV>
</div>
    <div>
    <img src="../Documents and Settings/Administrator/桌面/IMG_0027.JPG" width="100px" onClick="alert_win.style.display='block';""/></div>
    </td>
    <td>
    <header id="header">Topology</header><br><div><img src="../Documents and Settings/Administrator/桌面/IMG_0027.JPG" width="100px"/></div></td>
  </tr>
</table>
</div>
</body>
<footer id = "copyright">
			<p><b>Copyright &copy;</b> 2013-2014 <a href = "#" title="Marie">Marie Prince @ Aalto, Helsinki</a></p>
</footer>
</html>
